<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <title>城市指南</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入核心样式 -->
    <link href="http://appimg.yinsoso.com/css/weui.min.css" rel="stylesheet">
    <link href="http://appimg.yinsoso.com/css/jquery-weui.css" rel="stylesheet">
    <link href="http://appimg.yinsoso.com/css/style-min.css" rel="stylesheet">
    <link href="http://appimg.yinsoso.com/css/public.css" rel="stylesheet">
    <link rel="stylesheet" href="http://appimg.yinsoso.com/swiper-3.3.1.min.css" />
    <!--当前页面的css-->
    <link href="../../css/cityGuide.css" rel="stylesheet">
    <!-- 引入核心JS -->
    <script src="http://appimg.yinsoso.com/js/vue.min.js"></script>
    <script src="http://appimg.yinsoso.com/js/3.2.0-jquery.min.js"></script>
    <script src="http://appimg.yinsoso.com/js/jquery-weui.min.js"></script>
    <script src="http://appimg.yinsoso.com/js/index.min.js"></script>
    <script src="http://appimg.yinsoso.com/js/fastclick.min.js"></script>
    <script src="http://appimg.yinsoso.com/js/common.js" type="text/javascript" ></script>
    <!--当前页面的js-->
    <!-- <script src="../../../template/js/factory.js"></script> -->
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>

<body class="topic_son_bg clearfix">
    <div style="height: .826rem;width: 100%;"></div>
    <section>
        <div class="cityguide-mapbox">
            <div id="mapcontainer" class="map"></div>
        </div>
    </section>
    <script type="text/javascript">
        //创建和初始化地图函数：
        function initMap() {
            createMap(); //创建地图
            setMapEvent(); //设置地图事件
            addMapControl(); //向地图添加控件
        }
        //创建地图函数：
        function createMap() {
            var map = new BMap.Map("mapcontainer"); //在百度地图容器中创建一个地图
            var point = new BMap.Point(116.550585, 39.867547); //定义一个中心点坐标
            map.centerAndZoom(point, 10); //设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map; //将map变量存储在全局
        }

        //地图事件设置函数：
        function setMapEvent() {
            map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
            map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
            map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
            map.enableKeyboard(); //启用键盘上下左右键移动地图
        }

        //地图控件添加函数：
        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrl_sca);
        }


        initMap(); //创建和初始化地图
    </script>

</body>

</html>